<template>
  <div>
    <el-container style="border: 1px solid #eee">
      <el-aside v-loading="loading" width="300px" style="background-color: rgb(238, 241, 246)">
        <el-form ref="form" :model="form" label-width="80px" label-position="top">
          <el-form-item label="域名列表">
            <el-input v-model="form.domians" type="textarea" rows="10" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="success" style="width:100%" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-aside>
      <el-main>
        <span>流量数据</span>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column
            label="域名"
            sortable
            width="180"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="ShowSimilarweb(scope.row)">{{ scope.row.domain }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="traffic"
            label="流量"
          />
          <el-table-column
            prop="keywords"
            label="关键词数量"
          />
          <el-table-column
            prop="domains"
            label="domains"
            sortable
            width="180"
          />
          <el-table-column
            prop="follow"
            label="follow"
          />
          <el-table-column
            prop="nofollow"
            label="nofollow"
          />
          <el-table-column
            prop="ip"
            label="ip"
          />

          <el-table-column
            prop="links"
            label="links"
          />

          <el-table-column
            prop="text"
            label="text"
          />
        </el-table>
      </el-main>
      <el-dialog
        title="similarweb流量"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <iframe :src="sdomin1" frameborder="0" width="100%" height="200" style="border: solid 1px #D7D7D7;" />
        <iframe :src="sdomin2" frameborder="0" width="100%" height="200" style="border: solid 1px #D7D7D7;" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
import { Post, GetHistory } from '@/api/eco/semrush'

export default {
  data() {
    return {
      form: {
        domians: 'amazon.com'
      },
      tableData: [],
      dialogVisible: false,
      sdomin1: '',
      sdomin2: '',
      loading: false
    }
  },
  created() {
    this.GetHistoryNow()
  },
  methods: {
    onSubmit() {
      this.loading = true
      Post(JSON.stringify({ domains: this.form.domians })).then((response) => {
        this.loading = false
        this.tableData = response.data
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
      console.log('submit!')
    },
    ShowSimilarweb(row) {
      this.dialogVisible = true
      this.sdomin1 = '//widget.similarweb.com/traffic/' + row.domain
      this.sdomin2 = '//widget.similarweb.com/sources/' + row.domain
      console.log('show')
    },
    GetHistoryNow() {
      GetHistory().then((response) => {
        this.tableData = response.data
      })
    }
  }
}

</script>
